<template>
  <div class="wrapper">
    <el-button :type="buttonType(0)" @click="changeStatus(0)">待审核</el-button>
    <el-button :type="buttonType(1)"  @click="changeStatus(1)">审核通过</el-button>
    <el-button :type="buttonType(2)"  @click="changeStatus(2)">审核失败</el-button>
  	<el-table :data="list" :stripe="true" :border="true" :highlight-current-row="true">
  	  <el-table-column label="ID" prop="id"></el-table-column>
  	  <el-table-column label="账号名" prop="name"></el-table-column>
  	  <el-table-column label="真实姓名" prop="other_info.real_name"></el-table-column>
  	  <el-table-column label="身份证号" prop="other_info_authentication.id_number"></el-table-column>
  	  <el-table-column label="提交日期" prop="other_info_authentication.create_time"></el-table-column>
  	  <el-table-column label="状态" prop="other_info_authen_status_text"></el-table-column>
  		<el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/user/edit/' + scope.row.id">
            <el-button size="mini">查看</el-button>
          </router-link>
          <el-button v-if="scope.row.other_info_authen_status === '0'" size="mini" @click="auditPass(scope.row, 1)">审核通过</el-button>
          <el-button v-if="scope.row.other_info_authen_status === '0'" size="mini" @click="auditPass(scope.row, 2)">审核失败</el-button>
        </template>
      </el-table-column>
  	</el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import notify from '@/tools/notify'

  // status: 默认取待审核状态
  export default {
    data () {
      return {
        status: 0
      }
    },
    created () {
      // 后台获取实名认证分页列表数据
      this.getList(0)
    },
    computed: {
      ...mapState({
        list: state => state.authentication.list,
        pageData: state => state.authentication.pageData
      })
    },
    methods: {
      // 后台获取实名认证列表
      async getList () {
        let payload = {
          page: this.pageData.current_page,
          list_rows: this.pageData.per_page,
          status: this.status
        }
        await this.$store.dispatch('authentication/getList', payload)
      },
      // 点击页面时，跳转到相应页面
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.getList()
      },
      // 按钮的颜色
      buttonType (val) {
        return Number(val) === Number(this.status) ? 'success' : ''
      },
      // 点击状态按钮时
      async changeStatus (val) {
        this.status = val
        await this.getList()
      },
      // 审核实名认证
      async auditPass (row, status) {
        let payload = {
          id: row.id,
          status: status
        }
        await this.$store.dispatch('authentication/auditPass', payload).then(res => {
          notify.success(res.msg)
          this.getList()
        })
      }
    }

  }
</script>
<style scoped lang="scss">
@import "../../../assets/scss/base.scss";
.wrapper {
  .el-table {
    table {
      tr {
        td {
          ul {
            li {
              label {
                display: inline-block;
                vertical-align: top;
                width: $label-w;
                height: $label-h;
                line-height: $label-h;
                text-align: right;
                padding-right: 10px;
              }
              span {
                display: inline-block;
                vertical-align: top;
                width: $label-w * 2;
                height: $label-h;
                line-height: $label-h;
              }
            }
          }
        }
      }
    }
  }
}
</style>
